import React, { useMemo, useState } from 'react';
import { Button, Divider } from 'antd';
// 如果使用了immutable 取值就不太方法
import { Map } from 'immutable';

// 最好是有name的
// https://github.com/vitejs/vite/issues/4298
function Home() {
  const [number, setNumber] = useState<number>(0);
  const [title, setTitle] = useState<string>('title');
  const handleClick = () => {
    setNumber(number + 1);
  };

  // 一般是用来缓存消耗性能的计算
  // useMemo 函数的放回值作为缓存值 缓存element
  // 依赖项发生了变化 重新计算
  // function React.useMemo<JSX.Element>(factory: () => JSX.Element, deps: React.DependencyList | undefined): JSX.Element
  // const UseMemoFunc = React.useMemo(() => {
  //   return <FuncTitle title={title} />;
  // }, [title]);

  return (
    <div>
      <p>Home</p>
      <Button onClick={handleClick}>+</Button>
      <Divider />
      <Counter number={number} title={title} />
      <Divider />
      <Title title={title} />
      <Divider />
      <Title1 title={title} />
      <Divider />
      <FuncTitle title={title} />
      <Divider />
      <MemoFuncTitle title={title} />
      <Divider />
      {useMemo(
        () => (
          <FuncTitle title={title} />
        ),
        [title],
      )}
      <Divider />
      {/* JSX 元素类型“UseMemoFunc”不具有任何构造签名或调用签名。ts */}
      {/* <UseMemoFunc /> */}
      <Divider />
    </div>
  );
}

// 类组件的 shouldComponent
// PureComponent 浅比较
// React.memo
// useMemo()

class Counter extends React.Component<any, any> {
  render() {
    console.log('counter render');
    return <div>{this.props.number}</div>;
  }
}

class Title extends React.Component<any, any> {
  render() {
    console.log('Title render');
    return <div>{this.props.title}</div>;
  }
}

// shallowEqual 浅比较 但是这样是不太好的
// 最好是使用深比较
class Title1 extends React.PureComponent<any, any> {
  // shouldComponentUpdate(
  //   nextProps: Readonly<any>,
  //   nextState: Readonly<any>,
  //   nextContext: any,
  // ): boolean {
  //   return true;
  // }

  render() {
    console.log('Title1 render');
    return <div>{this.props.title}</div>;
  }
}

function FuncTitle(props: any) {
  console.log('func render');
  return <div>{props.title}</div>;
}

// 浅比较的性能会更高
// 但是使用 深比较会更好呀
// 使用 immutable 不可变数据集 每次操作都会返回一个不同的对象(引用地址)
// 会尽可能的复用属性 性能非常的高
// 但是现在都是使用 immer
// React.memo是可以传入比较方法的

// function memo<T extends ComponentType<any>>(
//   Component: T,
//   propsAreEqual?: (prevProps: Readonly<ComponentProps<T>>, nextProps: Readonly<ComponentProps<T>>) => boolean
// ): MemoExoticComponent<T>;

const MemoFuncTitle = React.memo(FuncTitle);

export default Home;
